<template>
  <div class="swiper-box">
    <div class="new-titles">
      <h2>最新动态</h2>
      <h3>News</h3>
    </div>    
    <div class="carousel-wrapper" @mouseover="carouselOver"  @mouseout="carouselOut">
        <!-- 图片容器 -->
        <div class="img-content">
          <!--这里初始化只加载第一张图片，用户点击或定时器再加载其他图片
            这种加载模式也可优化初始化页面加载速度-->           
          <a>
            <!-- <img :src="imgSrc"/> -->
            <el-image :src="imgSrc" class="elimg" lazy></el-image>
            <div class="new-cont">
              <div class="dataTime">{{dataTime}}</div>
              <div class="title-bgin">{{title}}</div>
              <div class="line"></div>
              <dd v-html="contents" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;"></dd>
            </div>
          </a>
        </div>
        <!-- 底部圆形小图标 -->
        <div class="indicator-content" ref="indicator">
          <ul class="indicator-list">
            <li class="indicator-item" v-for="(item, index) in defaultList" :key="item.id">
              <a class="indicator-icon" @mouseover="iconOver(index)" :class="index === pos ? 'active' : '' "></a>
            </li>
          </ul>
        </div>
        <!-- 上一张、下一张按钮 -->
        <div class="control-content">
          <div title="上一条" class="prev" @click="toggleImg('prev')"><i class="el-icon-arrow-left"></i></div>
          <div title="下一条" class="next" @click="toggleImg('next')"><i class="el-icon-arrow-right"></i></div>
        </div>
    </div>     
  </div>
</template>

<script>
import axios from 'axios'
// 定义每个小图标的宽度
const iconWidth = 30;
export default {
  /*
  * 接收父组件的值,轮播图宽度、高度、相邻两张图片切换的间隔时间、轮播图路径数组
  */
  props: {
    interval: {
      type: Number,
      // default: 2500,
      required: true
    },
    // carouselList: {
    //   type: Array,
    //   required: true,
    //   default: function () {
    //       return []; 
    //   }
    // }
  },
  data() { 
  	return {
      // 子组件中模拟的轮播图数组，实际开发中应由父组件传入
      defaultList: [
        {id: 1, src: 'http://img12.360buyimg.com/da/jfs/t3172/29/7532815266/78514/96c6e177/58ba3348N479cafe1.jpg',
        title:"新闻标题",dataTime:'2019.01.22',contents:'新闻内容'
        },
        {id: 2, src: 'http://img10.360buyimg.com/da/jfs/t5626/206/5387922315/163107/149fda50/595ef2caN399971af.jpg',
        title:"55水电费22 的地sssdddddddddddddddddddddddddddddddddddddddddddddd方"},
      ],
      pos: 0,// 默认显示第一张图片，数组下标为0
      startmove: ''// 开启定时器
  	}
  },
  created() {
    // 调用定时器
    this.startmove = setInterval(this.bannerMove, this.interval);
    // 动态计算底部小图标容器的宽度和水平居中
    // this.$nextTick(() => {
    //   this.$refs.indicator.style.width = iconWidth * this.defaultList.length + 'px';  
    //   this.$refs.indicator.style.marginLeft = -(iconWidth / 2) * this.defaultList.length + 'px';  
    // })
  },
  computed: {
    // icon样式
    iconClass() {
      return '';
    },
    // 图片路径
    imgSrc() {
      return this.defaultList[this.pos].src;
    },
    dataTime(){
      return this.defaultList[this.pos].dataTime;
    },
    title(){
      return this.defaultList[this.pos].title;
    },
    contents(){
      return this.defaultList[this.pos].contents;
    }
  },
  beforeDestroy() {
    // 组件销毁前,清除监听器
    clearInterval(this.startmove);  
  },
  methods: {
   // 图片上、下一张切换
    toggleImg(type) {
      if(type === 'prev'){
        this.pos === 0 ? this.pos = this.defaultList.length - 1 : this.pos -- ;
      }else{
        this.pos === this.defaultList.length - 1 ? this.pos = 0 : this.pos ++ ;
      }
    },
    // 小图标鼠标hover事件
    iconOver(index) { 
      if(isNaN(index)) return;
      this.pos = index;
    },
    // 图片自动切换定时器方法
    bannerMove() {
      this.pos === this.defaultList.length - 1 ? this.pos = 0 : this.pos ++ ;
    },
    // 鼠标移入图片区域，清除定时器，防止和用户切换图片事件冲突
    carouselOver() {
      clearInterval(this.startmove);  
    },
     // 鼠标移出图片区域，开启定时器
    carouselOut() {
      this.startmove = setInterval(this.bannerMove, this.interval);
    },
    init(){
      axios.post('/web/tAreaNews/news').then((res)=> {
        if(res.data.code == 2000){
          this.defaultList = res.data.data.list
        }else{
          // this.$message.error('服务器错误');
        }
      })
    }
  },
  mounted() {
    this.init()
  }
};
</script>
<style scoped lang="scss">
.swiper-box{
  padding: 78px 0 60px 0;
  max-width: 1200px;
  margin: 0 auto;
  .new-titles{
    @include max-content;
    h2{
      font-size: 30px;
      line-height: 30px;
      color: #2f70dc;
    }
    h3{
      font-size: 22px;
      line-height: 22px;
      color: #cccccc;
      margin: 16px  0 50px 0;
    }
  }
  .carousel-wrapper{
    position: relative;
    height: 430px;
    max-width: 1010px;
    margin: 0 auto;
    .img-content{
      position: absolute;
      top: 0;
      left: 0;
      a{
        zoom: 1;
        &:after{
          content: '';
          display: block;
          clear: both;
        }
      }
      .elimg{
        width: 560px;
        height:372px;
        float: left;
        display:block;
      }
      .new-cont{
        margin: 22px 0 0 56px;
        max-width: 388px;
        float: right;
        max-height: 312px;
        .dataTime{
          font-size: 18px;
          line-height: 18px;
          color: $main-color;
        }
        .title-bgin{
          font-size: 30px;
          line-height: 30px;
          color: #333;
          margin:15px 0 35px 0;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .line{
          width: 70px;
          border-bottom:2px solid #2f70dc;
        }
        dd{
          margin-top: 36px;
          max-height: 180px;
          line-height: 28px; 
          /* autoprefixer: ignore next */
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 6;
          overflow: hidden;        
        }
      }      
    }
   /*  .indicator-content{
      position: absolute;
      bottom: 20px;
      left: 50%;
      height: 22px;
      background: rgba(223, 223, 223, 0.6);
      border-radius: 11px;
      .indicator-list{
        overflow: hidden;
        .indicator-item{
          float: left;
          width: 30px;
          height: 22px;
          .indicator-icon{
            display: inline-block;
            margin: 3px 0 0 7px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            &.active{
              background: #df3526;
            }
          }
        }
      }
    } */
    .control-content{
      .prev, .next{
        position: absolute;
        top: 160px;
        width: 40px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #333;
        font-size: 34px;
        cursor: pointer;
        opacity: 0.2;
      }
      .prev{
        left:-104px;
        &:hover{
          opacity: 1;
        }
      }
      .next{
        right: -104px;
        &:hover{
          opacity: 1;
        }
      }
      
    }
  }
}

@media (min-width: 300px) and (max-width: 1199px){
  .swiper-box{
    padding: 78px 0 60px 0;
    width: 1200px;
    margin: 0 20px;
    .new-titles{
      @include max-content;
      h2{
        font-size: 30px;
        line-height: 30px;
        color: #2f70dc;
      }
      h3{
        font-size: 22px;
        line-height: 22px;
        color: #cccccc;
        margin: 16px  0 50px 0;
      }
    }
    .carousel-wrapper{
      display: none;
    }
  }
}
</style>